<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>배너 / 순환</title>
    <script type="text/javascript" src="../jquery-latest.js"></script>
    <script type="text/javascript" src="../jquery.easing.1.3.js"></script>
    <style type="text/css">
        *{margin:0;padding:0}
        body{padding:100px 0 0 100px}
    </style>
    <script type="text/javascript">
        $(function(){
            var imgWidth = $('.main-banner img').width();
            $('.ad-area-main').css({'overflow':'hidden','width':imgWidth});
            $('.main-banner').css({'display':'table','position':'relative','left':'0'});
            $('.main-banner li').css({'display':'table-cell','list-style':'none'});

            window.setInterval(function(){
                $('.main-banner').animate({'left':'-=' + imgWidth}, 1000, 'easeInOutElastic', function(){
                    $(this).append($('.main-banner li:first'))
                            .css('left','0');
                });
            }, 3000);
        });
    </script>
</head>
<body>

<div class="ad-area-main">
    <ul class="main-banner">
        <li><img src="../images2/main_ch01.jpg" alt="01"/></li>
        <li><img src="../images2/main_ch02.jpg" alt="02"/></li>
        <li><img src="../images2/main_ch03.jpg" alt="03"/></li>
    </ul>
</div>

</body>
</html>